<script setup>
import { ArrowDown } from '@element-plus/icons-vue';
import CreateImportantItemTree from './create-important-item-tree.vue';
import CreateImportantAuditContent from './create-important-audit-content.vue';

const isEdit = ref(false);
const options = ref([
  {
    value: 'Option1',
    label: 'Option1',
  },
  {
    value: 'Option2',
    label: 'Option2',
  },
  {
    value: 'Option3',
    label: 'Option3',
  },
  {
    value: 'Option4',
    label: 'Option4',
  },
  {
    value: 'Option5',
    label: 'Option5',
  },
]);

const value = ref('审计实施方案');
const valueInput = ref('审计实施方案');
const handleTitleClick = () => {
  isEdit.value = !isEdit.value;
  value.value = valueInput.value;
};
</script>

<template>
  <el-container class="index-home-implementation-plan-create-important">
    <el-header class="container">
      <div class="container-top">
        <div class="container-top__label">
          <label v-if="!isEdit" class="label__content">{{ value }}</label>
          <el-input
            v-else
            class="label__content-input"
            size="small"
            v-model="valueInput"
            placeholder="请输入方案名称"
          >
          </el-input>
          <iconify-icon
            class="label__operation"
            :icon="isEdit ?  'ep:circle-check' : 'ep:edit-pen'"
            :width="14"
            :height="14"
            @click="handleTitleClick"
            :title="isEdit ? '保存' : '编辑'"
          />
        </div>
        <div class="container-top__operation">
          <el-button type="primary">管理方案</el-button>
          <el-button type="primary">快速分工</el-button>
          <el-dropdown>
            <el-button type="primary">
              导入<el-icon class="el-icon--right"><arrow-down /></el-icon>
            </el-button>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>导入实施方案</el-dropdown-item>
                <el-dropdown-item>导入任务单</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
          <el-button>关闭</el-button>
        </div>
      </div>
      <div class="container__search">
        <el-select placeholder="请选择被审计单位" multiple clearable>
          <el-option :label="opt.label" :value="opt.value" v-for="opt in options" :key="opt.value"></el-option>
        </el-select>
      </div>
      <div class="container__main">
        <create-important-item-tree></create-important-item-tree>
        <create-important-audit-content></create-important-audit-content>
      </div>
    </el-header>
  </el-container>
</template>

<style lang="scss" scoped>
.index-home-implementation-plan-create-important {
  margin-top: 18px;

  .container {
    .container-top {
      display: flex;
      justify-content: space-between;

      .container-top__label {
        display: flex;

        .label__content {
          height: 24px;
          font-size: 16px;
          font-weight: bold;
          color: #25292C;
          line-height: 24px;
          letter-spacing: 1px;
        }

        .label__content-input {
          width: 180px;
        }

        .label__operation {
          margin-left: 9px;
          cursor: pointer;
        }
      }

      .container-top__operation {
        display: flex;
        gap: 8px;

        .el-button {
          margin-left: 0;
        }
      }
    }

    .container__search {
      display: flex;
      align-items: center;
      padding-left: 24px;
      height: 64px;
      background: #FFFFFF;
      border-radius: 2px;
      margin-top: 15px;
    }

    .container__main {
      display: flex;
      justify-content: space-between;
      gap: 16px;
      height: 826px;
      background: #FFF;
      border-radius: 2px;
      margin-top: 16px;
      padding: 16px 24px;
    }
  }
}
</style>
